<template>
	<!-- paysucceed支付成功 -->
	<view class="p_wp">
		<image class="succeed_image" src="../../static/imgs/succeed.png" mode=""></image>
		<view class="li4">支付成功</view>
		<view class="li4 li5">消费{{info.price}}元</view>
		<view class="li">
			<text>【订单编号】</text>
			<text>{{info.ordersn}}</text>
		</view>
		<view class="li3">
			<text>【实付金额】</text>
			<text>{{info.realprice}}元</text>
		</view>
		<view class="li">
			<text>【支付商家】</text>
			<text>{{info.supname}}</text>
		</view>
		<view class="li">
			<text>【账单金额】</text>
			<text>{{info.price}}元</text>
		</view>
		<view class="li">
			<text>【会员优惠】</text>
			<text>{{info.discountprice}}元</text>
		</view>
		<view class="li2">支付时间 {{info.paytime}}</view>
		<view class="go_home" @click="$navTo('/pages/index/index')"><text>返回首页</text></view>
		<view class="he_xiao">
			<image @longtap="saveImage" :src="info.checkthumb" mode=""></image>
			<view class="message" v-if="info.checkthumb!==''">
				<view>请将核销码出示给收银员核销</view>
				<view >否则将无法退款</view>
				<view class="m_warn2">如果暂时不核销，可在订单中查看核销码</view>
				<!-- <view class="m_warn2">退回，您也可在订单页详情页查看核销码</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paysn: '',
				info: {
					discountprice: 0,
					ordersn:'',
					paytime: '',
					price: '',
					realprice: '',
					supname: '',
					checkthumb:''
				},
			}
		},
		onLoad(option) {
			this.paysn = option.paysn;
			this.getInfo();
		},
		methods: {
			saveImage() {
				var that = this;
				uni.showModal({
					title: '保存',
					content: '保存核销码？',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.info.checkthumb,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								}
							});
						}
					}
				});
			},
			getInfo() {
				this.$axios('paytrans/payorder', 'POST', 'order', {
					paysn: this.paysn
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		color: $font-color-base;
		padding-bottom: 100upx;
	}

	.succeed_image {
		display: block;
		margin: 0 auto;
		height: 280upx *0.8;
		width: 340upx*0.8;
	}

	.li,
	.li2,
	.li3,
	.li4 {
		text-align: center;
		line-height: 50upx;

		text {
			display: inline-block;
			width: 50%;
		}

		text:nth-of-type(1) {
			text-align: right;
		}

		text:nth-of-type(2) {
			text-align: left;
		}
	}

	.li4 {
		font-weight: bold;
		font-size: 42upx;
		line-height: 70upx;
	}

	.li5 {
		color: rgb(19, 149, 59);
		font-size: 44upx;
		letter-spacing: 2px;
		transform: scaleY(1.3);
	}

	.li2 {
		padding-bottom: 20upx;
	}

	.li3 text {
		color: $base-color;
	}

	.go_home {
		text-align: center;
		padding-top: 20upx;

		text {
			border: 1px $base-color solid;
			border-radius: 8upx;
			color: $base-color;
			display: inline-block;
			letter-spacing: 1px;
			line-height: 55upx;
			padding: 0 20upx;
		}
	}
	.he_xiao {
		padding: 30upx;
		text-align: center;
	
		image {
			border-radius: 20upx;
			height: 300upx;
			width: 300upx;
		}
	}
	.message{
		color: #e10202;
		padding: 30upx;
		font-size: 38upx;
		.m_warn2{
			color: #02970a;
			font-size: 38upx;
		}
	}
</style>